body{padding: 0}
.container{margin: auto;padding: 0 15px;}
.up{text-transform: uppercase;}
.cen{text-align: center;}
.unlist{list-style: none;}
.wg{font-weight: bold;}
.navbar{margin-top: -20px;padding: 10px 0;overflow: hidden;}
.navbar .fa-home{display: none;cursor: pointer;}
.navbar h1{float: left;color: #7373eb;font-size: 40px;}
.navbar h1 span{color:#2828c9}
.navbar ul{float: right;overflow: hidden;margin-top: 40px;font-family: 'Bebas Neue', cursive;}
.navbar ul li{float: right;margin-left:23px;font-size: 25px;letter-spacing: 1.5px;;transition: all 0.3s ease-in-out ;}
.navbar ul li:hover{color:#2828c9;cursor: pointer;}
@media (max-width:768px){
    .container{width:500px}
    .navbar{overflow: hidden;}
    .navbar h1{font-size: 30px;margin-right: 10px;margin-left: 6px;display: inline-block;margin-top: -40px}
    .navbar .fa-home{margin-left:400px;margin-right: 20px;margin-top: 10px;display:inline-block;}
    .navbar ul{margin-top: 70px;margin-left: -10px;margin-right: 5px;float: none;text-align: center;display:block;display: none;padding-bottom: 0;}
    .navbar ul li{margin-left:10px;font-size: 25px;letter-spacing: 1px;float: none;margin-bottom: 10px;}   
}
@media (min-width:768px){
    .container{width:750px}
    .navbar h1{font-size: 30px;margin-right: 10px;margin-left: 6px;}
    .navbar ul{margin-top: 30px;margin-left: -10px;margin-right: 5px;float: right;}
    .navbar ul li{margin-left:10px;font-size: 25px;letter-spacing: 1px}   
}
@media (min-width:991px){
    .container{width:900px}
    .navbar h1{font-size: 35px;}
    .navbar ul{margin-top: 35px;margin-right: 0;}
    .navbar ul li{margin-left:15px;font-size: 25px;letter-spacing: 1px}   
}
@media (min-width:1200px){
    .container{width:1000px}
    .navbar h1{font-size: 40px;}
    .navbar ul{margin-top: 40px;margin-right: 0;}
    .navbar ul li{margin-left:23px;font-size: 25px;letter-spacing: 1.5px}   
}

.header{padding:20px 0;;overflow: hidden;}
.header .text{float: left;width:60%}
.header .text h2{font-family: 'lobster', cursive;letter-spacing: 1.8px;font-size: 55px;}
.header .text p{font-size: 40px;line-height: 55px;letter-spacing: 3px}
.header .img{float: right;width:300px;height:300px;margin-top: 105px;}
.header .img img{width:100%;height:100%;border-radius: 50px 50px 50px 1px;}
.header .down-butter{border:3px solid;border-radius: 50%;margin-top: 420px;position: absolute;height:60px;width:60px;line-height: 60px;
margin-left:-150px;transition: all 0.3s ease-in-out;}
.header .down-butter:hover{background-color: #2828c9;border-color: #2828c9;color: white;cursor: pointer;}
.header .down-butter .fa-chevron-down{font-size:40px;font-weight: 100;margin:10px}
@media (max-width:768px){
    .header .text{text-align: center;margin: auto;width:95%}
    .header .img{text-align: center;float: none;margin: auto;width: 80%;height: 70%;}
    .header .img img{width: 100%;height: 100%;}
    .header .down-butter{margin-left: -250px;margin-top: 400px;}
}
/* start website colors*/
[data-default-color="blue"] .back{
    color: blue
}

[data-default-color="purple"] .back{
    color: purple;
}
[data-default-color="red"] .back{
    color: red;
}
/* end website colors*/

@media (max-width:768px){
    .about{padding: 50px 0;margin-top: 100px;}
    .about h2:after{left:-90px}
    .about h2{text-align: center;}
    .about .kalam{top:190px;float: none;}
    .about .kalam p{word-spacing: normal;}
    .about .kalam p span{left:0}
    .about .photo{text-align: center;float: none;margin: 0;width: 70%;height: 100%;}
    .about .photo img{width: 100%;text-align: center;margin: auto;height: 100%;}
}
@media (min-width:991px){
    .about h2:after{left:121px}
    .about .kalam{top:0;font-size: 10px;float: none;}
    .about .kalam p{font-size: 10px;}
    .about .kalam p span{left:0}
    .about .photo{float: none;width: 100%;}
    .about .kalam{margin-left: 100px;top: 50px;position: relative;}

}
@media (max-width:991px){
    .about .photo{width: 10%;top: 0;position: relative;}
    .about .photo img{width: 100%;}
    .about .kalam{width: 20%;top: 0;left: 200px;position: relative;font-size: 4px;margin-right: 0;}
    .about .kalam p{font-size: 4px;}
    .about .kalam p span{position: absolute;}
}
@media (min-width:1200px){
    .about h2:after{left:150px}
    .about .kalam p{font-size:15px}
}
.about{padding: 100px 0;overflow: hidden;}
.about h2{font-family: 'MuseoModerno', cursive;font-size: 40px;margin: 35px;margin-left:0;}
.about h2:after{content: " ";border-bottom: 3px solid;width: 60px;margin-top: 55px;position: relative;left: 171px;}
.about .photo{float: left;width:40%;top: 70px;position: relative}
.about .photo img{width: 100%;height: 100%;border-radius:30%}
.about .kalam{float: right;position: relative;left: -300px;}
.about .kalam p{font-family: 'Righteous', cursive;font-size: 30px;word-spacing: 10px;margin-bottom: 50px;}
.about .kalam p span{position: absolute;left: 240px;word-spacing: 0;}
@media (max-width:768px){
    .about .photo{text-align: center;float: none;margin: auto;width: 80%;height: 70%;}
    .about .photo img{width: 100%;text-align: center;margin: auto;height: 100%;}
    .about .kalam{left: -350px;margin-top: 50px;}
}

.skills{padding: 30px 0;overflow: hidden;}
.skills h2{font-family: 'Righteous', cursive;font-size: 30px;margin-bottom: 50px;letter-spacing: 1px;}
.skills .skill-pro{display: flex;padding: 10px 0;}
.skills .skill-pro .pretext{width:140px;text-align: center;font-size: 25px;letter-spacing: 1.5px;margin-bottom: 15px;font-family: 'Bebas Neue', cursive;}
.skills .skill-pro .pro{position: relative;;height:20px;width: 100%;background-color: #cbcbd6;}
.skills .skill-pro .pro span{position: absolute;background-color: #2828c9;height: 100%;width: 0;left: 0;top: 0;transition: all 0.5s ease-in-out;}
.skills .skill-pro .pro .pro-one{width: 90%;}
.skills .skill-pro .pro .pro-two{width: 85%;}
.skills .skill-pro .pro .pro-thr{width: 75%;}
.skills .skill-pro .pro .pro-four{width:80%}
.skills .skill-pro .pro .pro-five{width:85%}
.skills .skill-pro .pro .pro-six{width:90%}
@media (max-width:768px) {
    .skills .skill-pro .pro{width:70%}
}

.feedback{padding: 30px 0;background-color: black;color: blanchedalmond;overflow: hidden;}
.feedback h2{font-family: 'Bebas Neue', cursive;font-size: 30px;margin-bottom: 50px;letter-spacing: 1px;letter-spacing: 1.5px;}
.feedback .dh p{margin-bottom: 30px;}
.feedback .dh > div{display:none;}
.feedback .dh > div img{width: 100%;height: 100%;border-radius: 50%;}
.feedback .dh .act{display: block;}
.feedback .fa-chevron-right{position: relative;left:300px;top:50px;cursor: pointer;}
.feedback .fa-chevron-left{position: relative;left:-282px;top: -35px;cursor: pointer;}
@media (max-width:768px) {
    .feedback .fa-chevron-right{left:230px}
    .feedback .fa-chevron-left{left:-230px;}
}

.contact{padding: 30px 0}
.contact .con{float: left;width: 30%;}
.contact .con > input{display: block;border: none;padding: 10px 10px 10px 0;margin-bottom: 10px;border-bottom: 1px solid gray;background: none;}
.contact .info{float: right;width: 40%}
.contact .info textarea{background: none;padding: 10px;width: 80%;border-radius: 20px}
@media (max-width:768px){
    .contact .info{float: none;width:95%}
    .contact .con{margin-bottom: 40px;}
    .contact .con > input{width: 400px;}
}

.footer{padding: 30px 0;margin-top: 200px;background-color: black;color: blanchedalmond;}
.footer .foo{margin: auto;}
@media (max-width:768px) {
    .footer{margin-top: 0;}
}

.menu{position: fixed;height: 500px;width:240px;background-color: rgb(8, 5, 5);left:-260px;top:100px;color: white;box-shadow: 1px 1px 20px red,
-1px -1px 20px blue;z-index: 99999;}
.menu i{position: absolute;right: -45px;top:250px;width:30px;height: 30px;line-height: 30px;cursor: pointer;}
.menu h3{font-size: 25px;font-family: 'Metal Mania', cursive;}
.menu ul{margin-left: -50px;}
.menu ul li{width:30px;height: 30px;display: inline-block;cursor: pointer;border-radius: 50%;}
.menu ul li:first-child{background-color: red;}
.menu ul li:nth-of-type(2){background-color: purple;}
.menu ul li:last-child{background-color: #2828c9;}
.menu .night{border-radius: 30%;background-color: #b6b6f1;width: 150px;height: 60px;margin: 45px auto}
.menu .night span{width: 50px;height: 50px;border-radius: 50%;background-color: #2828c9;position: absolute;cursor: pointer;}

[data-defalut-color="red"] .skew-color{color: red !important;}
[data-defalut-color="purple"] .skew-color{color: purple !important;}
[data-defalut-color="blue"] .skew-color{color: #2828c9 !important;}

[data-defalut-color="red"] .skew-color-hover:hover{color: red !important;}
[data-defalut-color="purple"] .skew-color-hover:hover{color: purple !important;}
[data-defalut-color="blue"] .skew-color-hover:hover{color: #2828c9 !important;}
    
[data-defalut-color="red"] .skew-back{background-color: red !important;}
[data-defalut-color="purple"] .skew-back{background-color: purple !important;}
[data-defalut-color="blue"] .skew-back{background-color: #2828c9 !important;}

[data-defalut-color="red"] .skew-back-hover:hover{background-color: red}
[data-defalut-color="purple"] .skew-back-hover:hover{background-color: purple}
[data-defalut-color="blue"] .skew-back-hover:hover{background-color: #2828c9}

[data-defalut-color="red"] .skew-back-border{background-color: red;border-color: red}
[data-defalut-color="purple"] .skew-back-border{background-color: purple;border-color: purple}
[data-defalut-color="blue"] .skew-back-border{background-color: #2828c9;border-color: #2828c9}

[data-defalut-color="red"] .skew-back-border-hover:hover{background-color: red;border-color: red}
[data-defalut-color="purple"] .skew-back-border-hover:hover{background-color: purple;border-color: purple}
[data-defalut-color="blue"] .skew-back-border-hover:hover{background-color: #2828c9;border-color: #2828c9}

[data-defalut-color="red"] .skew-color-border{color: red;border-color: red}
[data-defalut-color="purple"] .skew-color-border{color: purple;border-color: purple}
[data-defalut-color="blue"] .skew-color-border{color: #2828c9;border-color: #2828c9}
.cl-de{color:#2828c9}
.cl-bor{border-color: #2828c9}